<!DOCTYPE html>

<html lang="zh-Hans">
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="rogepi" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="/vue.global.js"></script>
    <title>3-attribute</title>
  </head>

  <body>
    <div id="attribute">
      <!-- Mustache 语法不能在 HTML attribute 中使用 ，
      然而，可以使用 v-bind 指令： -->
      <div v-bind:id="dynamicId"></div>
      <!-- 对于布尔 attribute (它们只要存在就意味着值为 true)，
    v-bind 工作起来略有不同，在这个例子中： -->
      <button v-bind:disabled="isButtonDisabled">按钮</button>
      <!-- 如果 isButtonDisabled 的值是 null 或 undefined，
      则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中。 -->
    </div>
    <script>
      const AttributeApp = {
        data() {
          return {
            dynamicId: 'test-id',
            isButtonDisabled: true,
          };
        },
      };
      Vue.createApp(AttributeApp).mount('#attribute');
    </script>
  </body>
</html>
